<template>
  <div
    class="tag"
    :class="{
      dark,
      active,
      selected: selected || selectedBg,
      'selected-bg': selectedBg,
      disabled,
      'narrow-padding': narrowPadding,
    }"
    @click="emits('click', value)"
  >
    <div
      class="font-size-14 font-style-normal font-weight-500 line-height-140"
      :class="{
        'text-white': !primarySelected,
        'primary-selected': selected && primarySelected,
      }"
    >
      {{ label }}
    </div>
  </div>
</template>
<script setup>
defineProps({
  label: {
    type: [String, Number],
    required: true,
  },
  value: {
    type: [String, Number],
    required: true,
  },
  dark: {
    type: Boolean,
    default: false,
  },
  active: {
    type: Boolean,
    default: false,
  },
  selected: {
    type: Boolean,
    default: false,
  },
  primarySelected: {
    type: Boolean,
    default: false,
  },
  selectedBg: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  narrowPadding: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['click'])
</script>
<style scoped lang="scss">
.tag {
  display: inline-block;
  padding: 0.375rem 1rem;
  justify-content: center;
  align-items: center;
  white-space: nowrap;

  border-radius: 3.125rem;
  background: var(--bg-dialog, #333546);
  border: 2px solid var(--color-primary-red, #333546);

  cursor: pointer;
}

.active {
  background: var(--color-primary-gradient, linear-gradient(180deg, #f95e0e 0%, #e717b3 100%));
}
.dark {
  background: var(--bg-blue, #181925);
}
.selected {
  border: 2px solid var(--color-primary-red, #f42c52);
}
.primary-selected {
  color: #f42c52;
}
.selected-bg {
  background: var(--color-primary-red, #f42c52);
}
.disabled {
  opacity: 0.5;
}
.narrow-padding {
  padding: 0.375rem 0.75rem;
}
</style>
